<template>
  <a-form-model ref="formRef" :model="form" labelAlign="right">
    <div class="header_view">
      <div class="header_menu_l">
        <div class="header_item_view">
          <a-form-model-item label="类型" :label-col="{ span: 4 }" :wrapper-col="{ span: 19, offset: 1 }">
            <a-select
              placeholder="启用/禁用"
              optionFilterProp="children"
              :showSearch="true"
              mode="default"
              v-model="form.stateFlag"
            >
              <a-select-option :value="item.value" v-for="(item, index) in stateList" :key="index">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div class="header_item_view">
          <a-form-model-item label="关键字" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input v-model="form.search" placeholder="指标名称/别称" />
          </a-form-model-item>
        </div>
      </div>
      <div class="header_menu_r">
        <a-button @click="resetHandler"> 重置 </a-button>
        <a-button type="primary" icon="search" @click="searchHandler">
          搜索
        </a-button>
        <a-button type="primary" icon="plus-circle" @click="addHandler">
          添加
        </a-button>
      </div>
    </div>
  </a-form-model>
</template>

<script>
export default {
  data() {
    return {
      stateList: [
        { name: '启用', value: 1 },
        { name: '禁用', value: 0 }
      ],
      form: {},
      activeTypes: [],
      labelCol: { span: 7 },
      wrapperCol: { span: 16, offset: 1 }
    }
  },
  created() {},
  methods: {
    searchHandler() {
      this.$emit('searchHandler', this.form)
    },
    addHandler() {
      this.$emit('addHandle')
    },
    resetHandler() {
      this.resetForm()
      this.$emit('searchHandler', {})
    },
    resetForm() {
      this.form = {}
    }
  }
}
</script>

<style scoped lang="less">
.header_view {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  ::v-deep .header_item_view {
    width: 240px;
    margin-right: 15px;

    .ant-form-item {
      margin-bottom: 0;
    }
  }

  .header_menu_l {
    // flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .header_menu_r {
    display: flex;
    align-items: center;

    button {
      margin-left: 15px;
    }
  }
}
</style>
